<!doctype html>
<html lang="en" data-framework="javascript">

<head>
  <title>Cimbar Decoder</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no">
  <link rel="manifest" href="pwa-recv.json">
</head>

<body>

  <style>
    * {
      margin: 0;
      padding: 0;
    }

    html,
    body {
      height: 100vh;
    }

    body {
      background-color: white;
      background-image: linear-gradient(135deg, rgb(0, 0, 0) 65px, transparent 130px),
        repeating-linear-gradient(135deg, rgb(0, 0, 0) 0px, rgb(153, 197, 206) 1px, transparent 1px, transparent 30px),
        repeating-linear-gradient(45deg, rgb(0, 0, 0) 0px, rgb(153, 197, 206) 1px, transparent 1px, transparent 30px);
      background-size: cover;
    }

    @media (prefers-color-scheme: dark) {
      body {
        background-color: black;
        color: white;
      }
    }

    #container {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: -100;
      overflow: hidden;
      /* Hide scrollbars */
    }

    video {
      height: 100%;
      width: 100%;
      z-index: -100;
      background-size: cover;
      transition: 1s opacity;
    }

    .statusbox {
      color: white;
      text-shadow: 1px 1px 1px green;
    }

    #progress_bars {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      margin-bottom: 1vh;
    }

    .progress {
      display: block;
      height: 1.2vh;
      margin-bottom: 1vh;
      background-color: white;
      border-top: 0.2vh inset navy;
      border-bottom: 0.4vh inset navy;
      border-right: 0.3vh inset navy;
      border-radius: 0 0.5vh 0.5vh 0;
      max-width: 100%;
      width: 0;
    }

    .crosshairs {
      border-color: white !important;
    }

    .crosshairs.scanning_xhairs {
      border-color: #FFFF00 !important;
    }

    .crosshairs.active_xhairs {
      border-color: #00FF00 !important;
    }

    #crosshair1 {
      position: fixed;
      top: 15%;
      right: 20%;
      width: 5%;
      height: 5%;
      z-index: -50;
      border-right: 5px groove;
      border-top: 5px groove;
      box-shadow: inset 0 0 0 4px #555,
    }

    #crosshair2 {
      position: fixed;
      bottom: 20%;
      left: 15%;
      width: 5%;
      height: 5%;
      z-index: -50;
      border-left: 5px groove;
      border-bottom: 5px groove;
      box-shadow: inset 0 0 0 4px #555,
    }

    #nav-container:focus-within {
      z-index: 1;
    }

    #nav-content,
    #nav-container .bg,
    #nav-container:focus-within #nav-button {
      z-index: 1;
    }

    /* options */
    #nav-container a.mode-b,
    #nav-container a.mode-bm,
    #nav-container a.mode-4c {
      color: #555;
    }

    #nav-container.mode-b a.mode-b,
    #nav-container.mode-bm a.mode-bm,
    #nav-container.mode-4c a.mode-4c {
      color: #9fa6b2;
    }

    /* nav stuff */
    /* built off of https://codepen.io/dannievinther/pen/NvZjvz */
    #nav-container {
      position: fixed;
      top: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }

    #nav-container .bg {
      pointer-events: auto;
      position: absolute;
      left: 0;
      width: 100%;
      height: 100%;
      visibility: hidden;
      opacity: 0;
      transition: .3s;
      background: black;
    }

    #nav-container:focus-within .bg {
      visibility: visible;
      opacity: .6;
    }

    #nav-container * {
      visibility: visible;
    }

    #nav-button {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 60px;
      width: 30px;
      margin-left: 15px;
      cursor: pointer;
      pointer-events: auto;
      touch-action: manipulation;
      border: 0;
      outline: 0;
      background-image: linear-gradient(180deg, rgb(0, 0, 0, 0) 10%, rgb(0, 0, 0) 40%, rgb(0, 0, 0) 60%, rgb(0, 0, 0, 0) 90%);
      background-color: initial;
    }

    #nav-button.hide {
      opacity: 0;
      transition: .3s;
    }

    #nav-container:focus-within #nav-button.hide {
      opacity: 1;
    }

    .icon-bar {
      display: block;
      width: 100%;
      height: 3px;
      transition: .3s;
    }

    .icon-bar+.icon-bar {
      margin-top: 3px;
    }

    #nav-container .icon-bar:nth-of-type(1) {
      background-color: #00ff00;
      box-shadow: 0px 0px 5px #00ff00, 0px 0px 2px #00ff00;
    }

    #nav-container .icon-bar:nth-of-type(2) {
      background-color: #ffff00;
      box-shadow: 0px 0px 5px #ffff00, 0px 0px 2px #ffff00;
    }

    #nav-container .icon-bar:nth-of-type(3) {
      background-color: #00ffff;
      box-shadow: 0px 0px 5px #00ffff, 0px 0px 2px #00ffff;
    }

    #nav-container .icon-bar:nth-of-type(4) {
      background-color: #ff00ff;
      box-shadow: 0px 0px 5px #ff00ff, 0px 0px 2px #ff00ff;
    }

    #nav-container.mode-4c .icon-bar:nth-of-type(1) {
      background-color: #00ffff;
      box-shadow: 0px 0px 5px #00ffff, 0px 0px 2px #00ffff;
    }

    #nav-container.mode-4c .icon-bar:nth-of-type(2) {
      background-color: #ffff00;
      box-shadow: 0px 0px 5px #ffff00, 0px 0px 2px #ffff00;
    }

    #nav-container.mode-4c .icon-bar:nth-of-type(3) {
      background-color: #00ff00;
      box-shadow: 0px 0px 5px #00ff00, 0px 0px 2px #00ff00;
    }

    #nav-container.mode-4c .icon-bar:nth-of-type(4) {
      background-color: #ff00ff;
      box-shadow: 0px 0px 5px #ff00ff, 0px 0px 2px #ff00ff;
    }

    #nav-container:focus-within #nav-button {
      pointer-events: none;
    }

    #nav-container:focus-within .icon-bar {
      background-color: #aaa;
      background-image: none !important;
      box-shadow: none !important;
    }

    #nav-button.attention:focus-within .icon-bar {
      background-color: #00ffff;
    }

    #nav-container:focus-within .icon-bar:nth-of-type(1) {
      transform: translate3d(0, 9px, 0) rotate(45deg);
    }

    #nav-container:focus-within .icon-bar:nth-of-type(2),
    #nav-container:focus-within .icon-bar:nth-of-type(3) {
      opacity: 0;
    }

    #nav-container:focus-within .icon-bar:nth-of-type(4) {
      transform: translate3d(0, -9px, 0) rotate(-45deg);
    }

    #nav-content {
      margin-top: 60px;
      padding: 20px;
      position: absolute;
      top: 0;
      left: 0;
      height: calc(100% - 60px);
      overflow-x: clip;
      background-color: #282C34;
      text-align: center;
      pointer-events: auto;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      transform: translateX(-100%);
      transition: transform .3s;
    }

    #nav-content ul {
      height: calc(100% - 60px);
      display: flex;
      flex-direction: column;
      list-style: none;
    }

    #nav-content hr {
      border: 1px solid #444;
    }

    #nav-content li a {
      display: block;
      padding: 10px 5px;
      color: #9fa6b2;
      text-decoration: none;
      transition: color .1s;
    }

    #nav-content li a.attention {
      animation: glowing 1.5s infinite alternate;
    }

    #nav-content li a {
      font-variant: small-caps;
      font-size: 2em;
    }

    #nav-content h4 {
      color: gray;
      font-variant: small-caps;
      padding-top: 1em;
    }

    #nav-content li.modesel a {
      display: inline-block;
      width: 2em;
    }

    #nav-content li:hover {
      background-color: #2c323c;
    }

    #nav-content li:not(.small)+.small {
      margin-top: auto;
    }

    #nav-content li.small {
      display: flex;
      align-self: center;
    }

    #nav-content li.small a {
      font-size: 1em;
    }

    #nav-container:focus-within #nav-content,
    #debug_menu:focus-within {
      transform: none;
    }

    #debug_menu {
      transform: translateX(100%);
      margin-top: 60px;
      right: 0;
      padding: 20px;
      position: absolute;
      top: 0;
      max-width: 95%;
      z-index: 2;
      transition: transform .3s;
      opacity: 95%;
      background-color: black;
    }

    .invisible {
      display: none;
    }

    @keyframes glowing {
      0% {
        color: #00ffff;
      }
    }
  </style>

  <div id="container">
    <video id="video" autoplay="true" playsinline="true" muted="true">
    </video>
  </div>

  <div id="crosshair1" class="crosshairs"></div>
  <div id="crosshair2" class="crosshairs"></div>

  <div id="nav-container" class="mode-b">
    <div class="bg" onclick="Recv.blurNav();"></div>
    <button id="nav-button" tabindex="0" onclick="Recv.clickNav();">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <div id="nav-content" tabindex="-1">
      <ul>
        <li class="modesel">
          <h4>Mode</h4>
          <a class="mode-b" href="javascript:void(0)" onclick="Recv.setMode('B')">B</a>
          <a class="mode-bm" href="javascript:void(0)" onclick="Recv.setMode('Bm')">Bm</a>
          <a class="mode-4c" href="javascript:void(0)" onclick="Recv.setMode('4C')">4C</a>
        </li>
        <li class="small"><a href="javascript:void(0)" onclick="Recv.showDebug()">Debug</a></li>
        <li class="small"><a href="javascript:void(0)" onclick="Recv.toggleFullscreen()">Fullscreen</a></li>
        <li class="small"><a href="https://github.com/sz3/libcimbar">github</a></li>
        <li class="small"><a href="https://github.com/sz3/cfc/releases/latest">android app</a></li>
      </ul>
    </div>
    <div id="debug_menu">
      <button id="debug-button" onclick="Recv.showDebug();"></button>
      <div class="statusbox" id="errorbox"></div>
      <div class="statusbox" id="t0">hi</div>
      <div class="statusbox" id="t1">hi</div>
      <div class="statusbox" id="tdec">%VERSION%</div>
    </div>
  </div>

  <div id="progress_bars">
    <div class="progress"></div>
  </div>

  <script src="recv.js"></script>
  <script src="zstd.js"></script>

  <script type="text/javascript">
    Recv.init_ww(2);
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('./recv-sw.js');
    }
    var video = document.querySelector('#video');

    var Module = {};
    Module.onRuntimeInitialized = () => {
      Recv.init_video(video);
    };
  </script>

  <script src="cimbar_js.js"></script>

</body>

</html>